<template>
  <div id="content">
    <div class="login_body">
      <div>
        <input class="login_text" type="text" placeHolder="账户名/手机号/Email"  v-model="user">
      </div>
      <div>
        <input class="login_text" type="password" placeHolder="请输入您的密码" v-model="password">
      </div>
      <div class="login_btn">
        <input type="submit" value="登录" @click="login">
      </div>
      <div class="login_link">
    <router-link to="/register"> <a href="#">立即注册</a></router-link>
        <a href="#">找回密码</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export  default {
 name: 'loginMy',
  data() {
    return {
      user: '',
      password: ''
    };
  },
  computed: {
    ...mapGetters(['testUserInfo']),
  },
  methods:{
    ...mapMutations(['loginIn']),
    login() {
      if(!this.user.trim()) return alert('用户名不能为空！');
      if(!this.password) return alert('请输入密码！');
      console.log( this.testUserInfo);
      let testInfo = this.testUserInfo(this.user)
      if (!testInfo) return alert('用户名不存在！');
      if (this.user === testInfo.account && this.password === testInfo.password) {
        this.loginIn(testInfo)
        this.$router.push({ path:'/first'})
      } else {
        alert('密码错误！！')
        // 可选项：输入错误后清空用户名和密码
        // this.user = ''
        // this.password = ''
      }
    }
  }

}
</script>

<style scoped>
#content .login_body{  width:100%;}
.login_body .login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.login_body .login_btn{ height:50px; margin:10px;}
.login_body .login_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_body .login_link{ display: flex; justify-content:space-between;}
.login_body .login_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}
</style>
